<template>
  <div class="enterprise-demand-page">
    <!-- 添加Header组件 -->
    <Header />
    
    <!-- 顶部导航栏 -->
    <header class="page-header">
      <div class="header-container">
        <div class="logo-section">
          <h1 class="logo-title" @click="goToHome">{{ $t('enterpriseDemand.logoTitle') }}</h1>
        </div>
        <div class="user-section">
          <el-button 
            type="primary" 
            @click="goToUserHome"
            class="back-btn"
          >
            {{ $t('enterpriseDemand.backToHome') }}
          </el-button>
          <div class="user-info">
            <span class="username">{{ userName }}</span>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <section class="main-content">
      <div class="content-container">
        <h2 class="page-title">{{ $t('enterpriseDemand.pageTitle') }}</h2>
        
        <!-- 搜索栏 -->
        <div class="search-section">
          <div class="search-bar">
            <el-input 
              v-model="searchQuery" 
              :placeholder="$t('enterpriseDemand.searchPlaceholder')" 
              class="search-input"
              size="large"
            />
            <el-button type="primary" size="large" @click="search">
              {{ $t('enterpriseDemand.search') }}
            </el-button>
          </div>
        </div>

        <!-- 筛选器区域 -->
        <div class="filter-section">
          <!-- 留学生国籍 -->
          <div class="filter-row">
            <span class="filter-category">{{ $t('enterpriseDemand.filterNationality') }}</span>
            <div class="filter-options">
              <span 
                class="filter-option" 
                :class="{ active: selectedFilters.nationality.length === 0 }" 
                @click="selectFilter('nationality', $t('enterpriseDemand.filterAll'))"
              >
                {{ $t('enterpriseDemand.filterAll') }}
              </span>
              <span 
                v-for="nationality in displayNationalities" 
                :key="nationality"
                class="filter-option" 
                :class="{ active: selectedFilters.nationality.includes(nationality) }" 
                @click="selectFilter('nationality', nationality)"
              >
                {{ nationality }}
              </span>
              <span 
                v-if="hasMoreNationalities"
                class="filter-option more-option" 
                @click="showMoreNationalities"
              >
                {{ $t('enterpriseDemand.filterOtherCount', { count: remainingNationalitiesCount }) }}
              </span>
            </div>
          </div>

          <!-- 学历 -->
          <div class="filter-row">
            <span class="filter-category">{{ $t('enterpriseDemand.filterEducation') }}</span>
            <div class="filter-options">
              <span 
                class="filter-option" 
                :class="{ active: selectedFilters.education.length === 0 }" 
                @click="selectFilter('education', $t('enterpriseDemand.filterAll'))"
              >
                {{ $t('enterpriseDemand.filterAll') }}
              </span>
              <span 
                v-for="education in filterOptions.educations" 
                :key="education"
                class="filter-option" 
                :class="{ active: selectedFilters.education.includes(education) }" 
                @click="selectFilter('education', education)"
              >
                {{ education }}
              </span>
            </div>
          </div>

          <!-- 高级搜索区域 -->
          <div class="advanced-search-row">
            <span class="filter-category">{{ $t('enterpriseDemand.advancedSearch') }}</span>
            <div class="advanced-search-inputs">
              <el-input 
                v-model="advancedSearch.major" 
                :placeholder="$t('enterpriseDemand.majorPlaceholder')" 
                class="advanced-search-input"
                clearable
                @input="handleAdvancedSearchChange"
              />
              <el-input 
                v-model="advancedSearch.language" 
                :placeholder="$t('enterpriseDemand.languagePlaceholder')" 
                class="advanced-search-input"
                clearable
                @input="handleAdvancedSearchChange"
              />
              <el-input 
                v-model="advancedSearch.requirements" 
                :placeholder="$t('enterpriseDemand.requirementsPlaceholder')" 
                class="advanced-search-input"
                clearable
                @input="handleAdvancedSearchChange"
              />
              <el-input 
                v-model="advancedSearch.experience" 
                :placeholder="$t('enterpriseDemand.experiencePlaceholder')" 
                class="advanced-search-input"
                clearable
                @input="handleAdvancedSearchChange"
              />
            </div>
          </div>
        </div>

        <!-- 企业列表 -->
        <div class="enterprise-list">
          <!-- 加载状态 -->
          <div v-if="loading" class="loading-container">
            <div class="loading-spinner"></div>
            <p>{{ $t('enterpriseDemand.loadingEnterprises') }}</p>
          </div>
          
          <!-- 企业卡片 -->
          <div 
            v-else-if="filteredEnterprises.length > 0"
            v-for="enterprise in filteredEnterprises" 
            :key="enterprise.demandId || enterprise.id" 
            class="enterprise-card"
          >
            <div class="card-header">
              <div class="demand-info">
                <div class="demand-icon">
                  <span class="icon-text">{{ enterprise.title?.charAt(0) || 'D' }}</span>
                </div>
                <div class="demand-details">
                  <h3 class="demand-title">{{ enterprise.title }}</h3>
                  <p class="demand-meta">{{ enterprise.cooperationMode }} | {{ enterprise.location }} | {{ enterprise.salaryRange }}</p>
                  <p class="demand-status">
                    <el-tag :type="getStatusType(enterprise.demandStatus)" size="small">
                      {{ getStatusText(enterprise.demandStatus) }}
                    </el-tag>
                  </p>
                </div>
              </div>
            </div>
            
            <div class="card-content">
              <div class="demand-info-grid">
                <div class="info-item">
                  <span class="info-label"><b>{{ $t('enterpriseDemand.country') }}</b></span>
                  <span class="info-value" v-html="truncateText(enterprise.country || enterprise.location, 20)"></span>
                </div>
                <div class="info-item">
                  <span class="info-label"><b>{{ $t('enterpriseDemand.education') }}</b></span>
                  <span class="info-value" v-html="truncateText(enterprise.degreeRequirements, 20)"></span>
                </div>
                <div class="info-item">
                  <span class="info-label"><b>{{ $t('enterpriseDemand.major') }}</b></span>
                  <span class="info-value" v-html="truncateText(enterprise.majorRequirements, 20)"></span>
                </div>
                <div class="info-item">
                  <span class="info-label"><b>{{ $t('enterpriseDemand.language') }}</b></span>
                  <span class="info-value" v-html="truncateText(enterprise.languageRequirements, 20)"></span>
                </div>
                <div class="info-item">
                  <span class="info-label"><b>{{ $t('enterpriseDemand.skills') }}</b></span>
                  <span class="info-value" v-html="truncateText(enterprise.requirements, 20)"></span>
                </div>
                <div class="info-item">
                  <span class="info-label"><b>{{ $t('enterpriseDemand.experience') }}</b></span>
                  <span class="info-value" v-html="truncateText(enterprise.experienceRequirements, 20)"></span>
                </div>
              </div>
            </div>
            
            <div class="card-footer">
              <div class="button-group">
                <el-button 
                  type="info" 
                  size="small" 
                  @click="viewEnterpriseDetail(enterprise)"
                  class="detail-btn"
                >
                  {{ $t('enterpriseDemand.viewDetails') }}
                </el-button>
                <el-button 
                  :type="getApplicationButtonStatus(enterprise)"
                  @click="contactEnterprise(enterprise)"
                  :disabled="!canApply(enterprise)"
                  class="contact-btn"
                >
                  {{ getApplicationButtonText(enterprise) }}
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="!loading && filteredEnterprises.length === 0" class="empty-state">
          <div v-if="errorState" class="error-info">
            <h3 style="color: #f56c6c; margin-bottom: 10px;">{{ $t('enterpriseDemand.connectionIssue') }}</h3>
            <p style="color: #f56c6c; margin-bottom: 15px;">{{ errorState }}</p>
            <el-button type="primary" @click="loadAllEnterprises()" :loading="loading">
              {{ $t('enterpriseDemand.retry') }}
            </el-button>
          </div>
          <div v-else>
            <p>{{ $t('enterpriseDemand.noMatchingDemands') }}</p>
          </div>
        </div>
        
        <!-- 分页 -->
        <div v-if="!loading && totalCount > 0" class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50]"
            :total="totalCount"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
      </div>
    </section>

    <!-- 企业需求详情弹窗 -->
    <el-dialog
      v-model="enterpriseDetailVisible"
      :title="$t('enterpriseDemand.demandDisplay')"
      width="80%"
      :before-close="closeEnterpriseDetail"
    >
      <div v-if="currentEnterpriseDetail" class="demand-detail">
        <!-- 职位标题头部 -->
        <div class="demand-header">
          <h2 class="demand-title">{{ currentEnterpriseDetail.title }}</h2>
        </div>

        <!-- 基本信息 - 居中显示，用"|"分隔 -->
        <div class="basic-info-section">
          <div class="basic-info-line">
            <span v-if="currentEnterpriseDetail.cooperationMode">{{ currentEnterpriseDetail.cooperationMode }}</span>
            <span v-if="currentEnterpriseDetail.salaryRange">{{ currentEnterpriseDetail.salaryRange }}</span>
            <span v-if="currentEnterpriseDetail.demandType">{{ currentEnterpriseDetail.demandType === 'talent' ? $t('enterpriseDemand.talentDemand') : currentEnterpriseDetail.demandType }}</span>
          </div>
          <div class="basic-info-line">
            <span v-if="currentEnterpriseDetail.enterpriseIndustry">{{ $t('enterpriseDemand.enterpriseIndustry') }}{{ currentEnterpriseDetail.enterpriseIndustry }}</span>
            <span v-if="currentEnterpriseDetail.enterpriseCertificationStatus">{{ $t('enterpriseDemand.certificationStatus') }}{{ currentEnterpriseDetail.enterpriseCertificationStatus === 'approved' ? $t('enterpriseDemand.certified') : $t('enterpriseDemand.notCertified') }}</span>
          </div>
        </div>

        <!-- 需求要求详情 -->
        <div class="demand-requirements-section">
          <h3 class="section-title">{{ $t('enterpriseDemand.demandRequirements') }}</h3>
          <div class="section-content">
            <div class="requirements-grid">
              <div class="requirement-item">
                <span class="requirement-label">{{ $t('enterpriseDemand.targetNationality') }}</span>
                <span class="requirement-value">{{ currentEnterpriseDetail.targetNationalities }}</span>
              </div>
              <div class="requirement-item">
                <span class="requirement-label">{{ $t('enterpriseDemand.degreeRequirements') }}</span>
                <span class="requirement-value">{{ currentEnterpriseDetail.degreeRequirements }}</span>
              </div>
              <div class="requirement-item">
                <span class="requirement-label">{{ $t('enterpriseDemand.majorRequirements') }}</span>
                <span class="requirement-value">{{ currentEnterpriseDetail.majorRequirements }}</span>
              </div>
              <div class="requirement-item">
                <span class="requirement-label">{{ $t('enterpriseDemand.languageRequirements') }}</span>
                <span class="requirement-value">{{ currentEnterpriseDetail.languageRequirements }}</span>
              </div>
              <div class="requirement-item">
                <span class="requirement-label">{{ $t('enterpriseDemand.experienceRequirements') }}</span>
                <span class="requirement-value">{{ currentEnterpriseDetail.experienceRequirements }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 详细描述 -->
        <div class="demand-description-section">
          <h3 class="section-title">{{ $t('enterpriseDemand.detailedDescription') }}</h3>
          
          <!-- 职责描述 -->
          <div class="resume-section" v-if="currentEnterpriseDetail.description">
            <h4 class="subsection-title">{{ $t('enterpriseDemand.responsibilities') }}</h4>
            <div class="section-content">
              <div class="text-content" v-html="currentEnterpriseDetail.description"></div>
            </div>
          </div>
          
          <!-- 技能要求 -->
          <div class="resume-section" v-if="currentEnterpriseDetail.requirements">
            <h4 class="subsection-title">{{ $t('enterpriseDemand.skillsRequired') }}</h4>
            <div class="section-content">
              <div class="text-content" v-html="currentEnterpriseDetail.requirements"></div>
            </div>
          </div>
          
          <!-- 福利待遇 -->
          <div class="resume-section" v-if="currentEnterpriseDetail.benefits">
            <h4 class="subsection-title">{{ $t('enterpriseDemand.benefits') }}</h4>
            <div class="section-content">
              <div class="text-content" v-html="currentEnterpriseDetail.benefits"></div>
            </div>
          </div>
          
          <!-- 公司优势 -->
          <div class="resume-section" v-if="currentEnterpriseDetail.companyAdvantages">
            <h4 class="subsection-title">{{ $t('enterpriseDemand.companyAdvantages') }}</h4>
            <div class="section-content">
              <div class="text-content" v-html="currentEnterpriseDetail.companyAdvantages"></div>
            </div>
          </div>
        </div>
        
        <!-- 驳回信息 -->
        <div class="rejection-section" v-if="currentEnterpriseDetail.rejectionReason">
          <h3 class="section-title">{{ $t('enterpriseDemand.rejectionReason') }}</h3>
          <div class="section-content">
            <div class="text-content rejection-reason">{{ currentEnterpriseDetail.rejectionReason }}</div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeEnterpriseDetail">{{ $t('enterpriseDemand.close') }}</el-button>
          <el-button 
            type="primary" 
            @click="applyFromDetail"
            :disabled="!canApply(currentEnterpriseDetail)"
          >
            {{ getApplicationButtonText(currentEnterpriseDetail) }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 更多国籍选项弹窗 -->
    <el-dialog
      v-model="moreNationalitiesVisible"
      :title="$t('enterpriseDemand.selectNationality')"
      width="50%"
      :before-close="() => moreNationalitiesVisible = false"
    >
      <div class="more-nationalities-container">
        <div class="nationalities-grid">
          <span 
            v-for="nationality in remainingNationalities" 
            :key="nationality"
            class="nationality-option" 
            @click="selectFromMoreNationalities(nationality)"
          >
            {{ nationality }}
          </span>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="moreNationalitiesVisible = false">{{ $t('enterpriseDemand.cancel') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { studentApi } from '../../api/index.js'
import Header from '../../components/layout/Header.vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()

// 用户信息
const userName = ref('用户')

// 初始化用户名
const initUserName = () => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
  userName.value = userInfo.username || userInfo.name || '用户'
}

// 搜索
const searchQuery = ref('')

// 筛选器
const selectedFilters = ref({
  nationality: [],
  education: []
})

// 高级搜索
const advancedSearch = ref({
  major: '',
  language: '',
  requirements: '',
  experience: ''
})

  // 筛选选项
  const filterOptions = ref({
    nationalities: ['中国', '美国', '法国', '澳大利亚', '德国', '俄罗斯', '韩国', '加拿大', '日本', '西班牙', '英国', '印度', '意大利', '巴西', '新加坡', '马来西亚', '墨西哥', '其他'],
    educations: [t('enterpriseDemand.educationJuniorCollege'), t('enterpriseDemand.educationBachelor'), t('enterpriseDemand.educationMaster'), t('enterpriseDemand.educationDoctor'), t('enterpriseDemand.educationOther')]
  })

// 企业数据
const enterprises = ref([])
const originalEnterprises = ref([]) // 存储原始数据，用于前端筛选
const loading = ref(false)
const totalCount = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 企业详情弹窗相关
const enterpriseDetailVisible = ref(false)
const currentEnterpriseDetail = ref(null)

// 申请防抖状态
const applyingMap = ref(new Map())

// 错误状态
const errorState = ref(null)

// 状态处理函数
const getStatusText = (status) => {
  const map = {
    'online': t('enterpriseDemand.statusActive'),
    'draft': '草稿',
    'pending_review': t('enterpriseDemand.statusPending'),
    'approved': '已通过',
    'rejected': '已拒绝',
    'closed': t('enterpriseDemand.statusClosed'),
    'expired': t('enterpriseDemand.statusExpired')
  }
  return map[status] || status
}

const getStatusType = (status) => {
  const map = {
    'online': 'success',
    'draft': 'info',
    'pending_review': 'warning',
    'approved': 'success',
    'rejected': 'danger',
    'closed': 'info',
    'expired': 'info'
  }
  return map[status] || 'info'
}

// 文本截断函数 - 支持HTML标签排版
const truncateText = (text, maxLength) => {
  if (!text) return ''
  
  // 检查是否包含HTML标签
  const hasHtmlTags = /<[^>]*>/g.test(text)
  
  if (hasHtmlTags) {
    // 如果包含HTML标签，进行智能处理
    return processHtmlContent(text, maxLength)
  } else {
    // 纯文本则进行截断
    if (text.length <= maxLength) return text
    return text.substring(0, maxLength) + '...'
  }
}

// HTML内容处理函数
const processHtmlContent = (htmlContent, maxLength) => {
  // 移除多余的空白字符
  let processed = htmlContent.trim()
  
  // 如果HTML内容太长，尝试智能截断
  const textContent = processed.replace(/<[^>]*>/g, '')
  if (textContent.length > maxLength * 2) {
    // 对于很长的HTML内容，保留基本结构但截断文本
    processed = truncateHtmlContent(processed, maxLength)
  }
  
  return processed
}

// HTML内容智能截断函数
const truncateHtmlContent = (htmlContent, maxLength) => {
  // 移除HTML标签获取纯文本
  const textContent = htmlContent.replace(/<[^>]*>/g, '')
  
  if (textContent.length <= maxLength) {
    return htmlContent
  }
  
  // 智能截断：在合适的位置截断，保持HTML标签完整
  let truncatedText = textContent.substring(0, maxLength)
  
  // 尝试在句子或单词边界截断
  const lastPeriod = truncatedText.lastIndexOf('。')
  const lastExclamation = truncatedText.lastIndexOf('！')
  const lastQuestion = truncatedText.lastIndexOf('？')
  const lastComma = truncatedText.lastIndexOf('，')
  const lastSpace = truncatedText.lastIndexOf(' ')
  
  let cutPoint = Math.max(lastPeriod, lastExclamation, lastQuestion, lastComma, lastSpace)
  
  if (cutPoint > maxLength * 0.7) {
    truncatedText = textContent.substring(0, cutPoint + 1)
  }
  
  // 重新构建HTML内容（简化版本）
  return `<span title="${htmlContent.replace(/<[^>]*>/g, '')}">${truncatedText}...</span>`
}

// 日期格式化函数
const formatDate = (dateString) => {
  if (!dateString) return '未设置'
  
  try {
    const date = new Date(dateString)
    if (isNaN(date.getTime())) return '日期格式错误'
    
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch (error) {
    return '日期格式错误'
  }
}

// 页面加载时初始化数据
onMounted(async () => {
  initUserName()
  await loadFilterOptions()
  await loadAllEnterprises()
})

// 监听高级搜索变化，添加防抖
let searchTimeout = null
const handleAdvancedSearchChange = () => {
  if (searchTimeout) {
    clearTimeout(searchTimeout)
  }
  searchTimeout = setTimeout(() => {
    applyFilters()
  }, 500) // 500ms防抖
}

// 加载筛选选项
const loadFilterOptions = async () => {
  try {
    // 获取国籍列表 - 调用指定的API接口
            const countriesResponse = await studentApi.getNationalities()
    
            if (countriesResponse.code === 200 || countriesResponse.code === 'SUCCESS') {
      // 从API响应中提取label字段作为国籍选项，并过滤掉null/undefined值
      const nationalities = countriesResponse.data
        ?.map(item => item?.label || item?.name || item?.country || item)
        ?.filter(label => label && typeof label === 'string' && label.trim() !== '') || []
      
      // 排序：中国在前，其他按英文首字母排序
      filterOptions.value.nationalities = nationalities.sort((a, b) => {
        if (a === '中国') return -1
        if (b === '中国') return 1
        return a.localeCompare(b, 'en')
      })
    } else {
      // 如果API调用失败，使用默认国籍列表
      filterOptions.value.nationalities = ['中国', '美国', '法国', '澳大利亚', '德国', '俄罗斯', '韩国', '加拿大', '日本', '西班牙', '英国', '印度', '意大利', '巴西', '新加坡', '马来西亚', '墨西哥', '其他']
    }
    
    // 其他筛选选项使用默认值
    filterOptions.value.educations = [t('enterpriseDemand.educationJuniorCollege'), t('enterpriseDemand.educationBachelor'), t('enterpriseDemand.educationMaster'), t('enterpriseDemand.educationDoctor'), t('enterpriseDemand.educationOther')]
  } catch (error) {
    // 使用默认筛选选项
    filterOptions.value.nationalities = ['中国', '美国', '法国', '澳大利亚', '德国', '俄罗斯', '韩国', '加拿大', '日本', '西班牙', '英国', '印度', '意大利', '巴西', '新加坡', '马来西亚', '墨西哥', '其他']
    filterOptions.value.educations = [t('enterpriseDemand.educationJuniorCollege'), t('enterpriseDemand.educationBachelor'), t('enterpriseDemand.educationMaster'), t('enterpriseDemand.educationDoctor'), t('enterpriseDemand.educationOther')]
  }
}

// 加载所有企业需求（支持分页）
const loadAllEnterprises = async (page = 1) => {
  loading.value = true
  try {
    // 调用企业需求管理接口
    const params = {
      page: page,
      pageSize: pageSize.value
    }
    
          const response = await studentApi.getDemands(params)
    
    if (response && response.code === 200) {
      // 清除错误状态
      errorState.value = null
      
      // 获取企业需求数据
      const demands = response.data?.demands || []
      enterprises.value = demands
      originalEnterprises.value = demands // 保存原始数据用于前端筛选
      totalCount.value = response.data?.pagination?.totalCount || 0
      currentPage.value = page
      pageSize.value = pageSize.value
      
      // 加载申请状态
      await loadApplicationStatus()
    } else {
      errorState.value = response?.message || '获取企业需求列表失败'
      ElMessage.error(response?.message || '获取企业需求列表失败')
    }
  } catch (error) {
    errorState.value = `连接失败: ${error.message}`
    ElMessage.error('网络连接失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 加载申请状态
const loadApplicationStatus = async () => {
  try {
    const token = localStorage.getItem('access_token')
    if (!token) {
      return // 未登录则不加载申请状态
    }

    // 获取学生的申请记录
    const response = await studentApi.getApplications()
    
    if (response.code === 200) {
      const applications = response.data.applications || []
      // 创建申请状态映射
      const statusMap = new Map()
      applications.forEach(app => {
        // 获取正确的需求ID字段（在demandInfo对象中）
        const demandId = app.demandInfo?.demandId || app.demandId || app.demand_id || app.id
        
        // 只保留最新的申请状态（按申请时间排序）
        if (!statusMap.has(demandId) || 
            new Date(app.applicationTime) > new Date(statusMap.get(demandId).applicationTime)) {
          statusMap.set(demandId, { ...app, demandId })
        }
                    })

      // 更新企业需求的申请状态
      enterprises.value.forEach(enterprise => {
        const application = statusMap.get(enterprise.demandId)
        if (application) {
          enterprise.applicationStatus = application.applicationStatus
          enterprise.applicationId = application.applicationId
          enterprise.applicationTime = application.applicationTime
          enterprise.statusDisplay = application.statusDisplay
        }
      })
      
      // 同时更新原始数据
      originalEnterprises.value.forEach(enterprise => {
        const application = statusMap.get(enterprise.demandId)
        if (application) {
          enterprise.applicationStatus = application.applicationStatus
          enterprise.applicationId = application.applicationId
          enterprise.applicationTime = application.applicationTime
          enterprise.statusDisplay = application.statusDisplay
        }
      })
    }
  } catch (error) {
    // 静默失败，不影响主要功能
  }
}

// 筛选后的企业列表（支持分页）
const filteredEnterprises = computed(() => {
  // 应用筛选逻辑
  let filteredData = [...originalEnterprises.value]
  
  // 1. 应用国籍筛选
  if (selectedFilters.value.nationality.length > 0) {
    const nationalityFilter = selectedFilters.value.nationality[0]
    filteredData = filteredData.filter(enterprise => {
      // 检查目标国籍字段，支持模糊匹配
      const targetNationalities = enterprise.targetNationalities || ''
      return targetNationalities.toLowerCase().includes(nationalityFilter.toLowerCase())
    })
  }
  
  // 2. 应用学历筛选
  if (selectedFilters.value.education.length > 0) {
    const educationFilter = selectedFilters.value.education[0]
    filteredData = filteredData.filter(enterprise => {
      // 检查学历要求字段，支持模糊匹配
      const degreeRequirements = enterprise.degreeRequirements || ''
      return degreeRequirements.toLowerCase().includes(educationFilter.toLowerCase())
    })
  }
  
  // 3. 应用高级搜索筛选
  Object.keys(advancedSearch.value).forEach(key => {
    const searchValue = advancedSearch.value[key]?.trim()
    if (searchValue) {
      filteredData = filteredData.filter(enterprise => {
        let fieldValue = ''
        
        // 根据搜索类型获取对应的字段值
        switch (key) {
          case 'major':
            fieldValue = enterprise.majorRequirements || ''
            break
          case 'language':
            fieldValue = enterprise.languageRequirements || ''
            break
          case 'requirements':
            fieldValue = enterprise.requirements || '' // 技能要求在requirements字段中
            break
          case 'experience':
            fieldValue = enterprise.experienceRequirements || ''
            break
          default:
            return true
        }
        
        // 模糊匹配，不区分大小写
        return fieldValue.toLowerCase().includes(searchValue.toLowerCase())
      })
    }
  })
  
  // 4. 应用主搜索框筛选
  if (searchQuery.value.trim()) {
    const mainSearchValue = searchQuery.value.trim().toLowerCase()
    filteredData = filteredData.filter(enterprise => {
      // 在多个字段中搜索
      const searchFields = [
        enterprise.title || '',
        enterprise.description || '',
        enterprise.requirements || '',
        enterprise.enterpriseName || '',
        enterprise.location || '',
        enterprise.cooperationMode || ''
      ]
      
      return searchFields.some(field => 
        field.toLowerCase().includes(mainSearchValue)
      )
    })
  }
  
  // 更新总数
  totalCount.value = filteredData.length
  
  // 分页处理
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return filteredData.slice(startIndex, endIndex)
})

// 显示的国籍列表（前15个）
const displayNationalities = computed(() => {
  return filterOptions.value.nationalities.slice(0, 15)
})

// 是否有更多国籍选项
const hasMoreNationalities = computed(() => {
  return filterOptions.value.nationalities.length > 15
})

// 剩余国籍数量
const remainingNationalitiesCount = computed(() => {
  return filterOptions.value.nationalities.length - 15
})

// 更多国籍弹窗相关
const moreNationalitiesVisible = ref(false)
const remainingNationalities = computed(() => {
  return filterOptions.value.nationalities.slice(15)
})

// 筛选器展开状态
const isFilterExpanded = ref(false)

// 搜索方法 - 前端搜索
const search = () => {
  // 直接调用筛选函数，搜索框的内容会在筛选逻辑中处理
  applyFilters()
}

// 筛选处理
const selectFilter = (type, value) => {
  if (value === '全部') {
    // 如果点击"全部"，清空该类型的所有选择
    selectedFilters.value[type] = []
  } else {
    // 单选逻辑：直接替换当前选择
    if (selectedFilters.value[type].includes(value)) {
      // 如果已选中，则取消选择（回到全部）
      selectedFilters.value[type] = []
    } else {
      // 如果未选中，则选中（替换之前的选择）
      selectedFilters.value[type] = [value]
    }
  }
  
  // 触发筛选
  applyFilters()
}

// 应用筛选 - 触发筛选重新计算
const applyFilters = () => {
  // 重置到第一页
  currentPage.value = 1
  // 筛选逻辑现在在computed属性中，这里只需要触发重新计算
}

// 分页处理函数
const handlePageSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1 // 重置到第一页
}

const handleCurrentPageChange = (newPage) => {
  currentPage.value = newPage
}

// 申请企业需求
const applyForEnterprise = async (enterprise) => {
  try {
    // 检查用户是否已登录
    const token = localStorage.getItem('access_token')
    if (!token) {
      ElMessage.warning(t('enterpriseDemand.pleaseLoginFirst'))
      router.push('/login')
      return
    }

    // 获取正确的需求ID字段
    const demandId = enterprise?.demandId || enterprise?.id
    if (!enterprise || !demandId) {
      ElMessage.error(t('enterpriseDemand.invalidDemandInfo'))
      return
    }

    // 防止重复申请
    const enterpriseId = demandId
    if (applyingMap.value.get(enterpriseId)) {
      ElMessage.warning(t('enterpriseDemand.processingApplication'))
      return
    }

    // 设置申请状态
    applyingMap.value.set(enterpriseId, true)

    // 调用申请API
    
    const response = await fetch('/api/api/v1/student/application/apply', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      body: JSON.stringify({
        demandId: parseInt(demandId)
      })
    })
    
    const result = await response.json()

    if (result.code === 200) {
      // 申请成功
      ElMessage.success(result.message || '申请提交成功，等待平台审核')
      
      // 更新企业状态，显示申请已提交
      if (result.data) {
        enterprise.applicationStatus = result.data.applicationStatus
        enterprise.applicationId = result.data.applicationId
        enterprise.applicationTime = result.data.applicationTime
        enterprise.statusDisplay = result.data.statusDisplay
      }
      
    } else {
      // 处理各种错误情况
      handleApplicationError(result, enterprise)
    }

  } catch (error) {
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    // 清除申请状态
    const enterpriseId = enterprise?.demandId || enterprise?.id
    if (enterpriseId) {
      applyingMap.value.delete(enterpriseId)
    }
  }
}

// 处理申请错误
const handleApplicationError = (result, enterprise) => {
  switch (result.code) {
    case 403:
      if (result.message.includes('权限不足')) {
        ElMessage.error('权限不足，只有学生用户可以申请企业需求')
      } else if (result.message.includes('简历需要先通过审核')) {
        ElMessage.error('简历需要先通过审核才能申请企业需求，请先完善简历信息')
      } else {
        ElMessage.error(result.message || '权限验证失败')
      }
      break
    case 400:
      if (result.message.includes('需求ID不能为空')) {
        ElMessage.error('申请参数错误')
      } else if (result.message.includes('该需求暂未发布')) {
        ElMessage.error('该需求暂未发布，无法申请')
      } else if (result.message.includes('学生用户ID格式错误')) {
        ElMessage.error('用户信息错误，请重新登录')
        // 可能需要重新登录
        setTimeout(() => {
          router.push('/login')
        }, 1000)
      } else if (result.message.includes('已提交')) {
        ElMessage.warning(result.message)
        // 更新企业状态为已提交
        enterprise.applicationStatus = 'submitted'
        enterprise.statusDisplay = '已提交'
      } else if (result.message.includes('平台审核中')) {
        ElMessage.warning(result.message)
        // 更新企业状态为平台审核中
        enterprise.applicationStatus = 'platform_reviewing'
        enterprise.statusDisplay = '平台审核中'
      } else if (result.message.includes('已推荐给企业')) {
        ElMessage.warning(result.message)
        // 更新企业状态为已推荐给企业
        enterprise.applicationStatus = 'recommended_to_enterprise'
        enterprise.statusDisplay = '已推荐给企业'
      } else {
        ElMessage.error(result.message || '请求参数错误')
      }
      break
    case 404:
      if (result.message.includes('需求不存在')) {
        ElMessage.error('需求不存在或已被删除')
      } else if (result.message.includes('找不到对应的学生信息')) {
        ElMessage.error('学生信息不存在，请重新登录')
        // 可能需要重新登录
        setTimeout(() => {
          router.push('/login')
        }, 1000)
      } else {
        ElMessage.error(result.message || '资源不存在')
      }
      break
    case 500:
      ElMessage.error('服务器内部错误，请稍后重试')
      break
    default:
      ElMessage.error(result.message || '申请失败，请稍后重试')
  }
}

// 获取申请按钮文本
const getApplicationButtonText = (enterprise) => {
  if (!enterprise || !enterprise.applicationStatus) {
    return t('enterpriseDemand.applyNow')
  }
  
  switch (enterprise.applicationStatus) {
    case 'submitted':
    case 'platform_reviewing':
      return '平台审核中'
    case 'recommended':
    case 'recommended_to_enterprise':
      return '已推荐给企业'
    case 'not_matching':
      return '重新申请'
    case 'accepted':
      return '已被接受'
    case 'rejected':
      return '已被拒绝'
    default:
      return t('enterpriseDemand.applyNow')
  }
}

// 获取申请按钮状态
const getApplicationButtonStatus = (enterprise) => {
  if (!enterprise || !enterprise.applicationStatus) {
    return 'primary'
  }
  
  switch (enterprise.applicationStatus) {
    case 'submitted':
    case 'platform_reviewing':
    case 'recommended':
    case 'recommended_to_enterprise':
      return 'info'
    case 'not_matching':
      return 'warning'
    case 'accepted':
      return 'success'
    case 'rejected':
      return 'danger'
    default:
      return 'primary'
  }
}

// 检查是否可以申请
const canApply = (enterprise) => {
  if (!enterprise) {
    return false
  }
  
  // 如果没有申请状态，说明未申请过，可以申请
  if (!enterprise.applicationStatus) {
    return true
  }
  
  // 只有 not_matching 状态可以重新申请，其他状态都不能申请
  return enterprise.applicationStatus === 'not_matching'
}

// 查看企业详情
const viewEnterpriseDetail = async (enterprise) => {
  try {
    // 企业需求详情可以直接使用当前数据，或者调用专门的详情API
    currentEnterpriseDetail.value = enterprise
    enterpriseDetailVisible.value = true
  } catch (error) {
    ElMessage.error('获取企业详情失败，请检查网络连接')
  }
}

// 关闭企业详情弹窗
const closeEnterpriseDetail = () => {
  enterpriseDetailVisible.value = false
  currentEnterpriseDetail.value = null
}

// 从详情弹窗申请
const applyFromDetail = async () => {
  if (currentEnterpriseDetail.value) {
    await applyForEnterprise(currentEnterpriseDetail.value)
    // 申请成功后关闭弹窗
    closeEnterpriseDetail()
  }
}

const contactEnterprise = (enterprise) => {
  applyForEnterprise(enterprise)
}

// 显示更多国籍选项
const showMoreNationalities = () => {
  moreNationalitiesVisible.value = true
}

// 从更多国籍弹窗中选择国籍
const selectFromMoreNationalities = (nationality) => {
  selectFilter('nationality', nationality)
  moreNationalitiesVisible.value = false
}

// 切换筛选器展开状态
const toggleFilterExpansion = () => {
  isFilterExpanded.value = !isFilterExpanded.value
}

const goToHome = () => {
  router.push('/')
}

const goToUserHome = () => {
  router.push('/use/home')
}
</script>

<style scoped>
.enterprise-demand-page {
  min-height: 100vh;
  background: #f5f7fa;
}

/* 顶部导航栏 */
.page-header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0;
  cursor: pointer;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.username {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 主要内容区域 */
.main-content {
  padding: 40px 0;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 0 32px 0;
  text-align: center;
}

/* 搜索区域 */
.search-section {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.search-bar {
  display: flex;
  gap: 12px;
}

.search-input {
  flex: 1;
}

/* 筛选器区域 */
.filter-section {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 32px;
}

.filter-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.filter-row:last-child {
  border-bottom: none;
}

.filter-category {
  min-width: 120px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-right: 20px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}

.filter-option {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  white-space: nowrap;
}

.filter-option:hover {
  color: #409eff;
}

.filter-option.active {
  background: #e6f7ff;
  color: #409eff;
  border-radius: 4px;
}

.filter-option.more-option {
  background: #f5f7fa;
  color: #606266;
  border: 1px dashed #dcdfe6;
}

.filter-option.more-option:hover {
  background: #e6f7ff;
  color: #409eff;
  border-color: #409eff;
}

/* 展开/收起按钮样式 */
.filter-expand-row {
  display: flex;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
}

.expand-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.expand-button:hover {
  border-color: #409eff;
  color: #409eff;
}

.expand-icon {
  font-size: 12px;
  transition: transform 0.2s;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

/* 展开的筛选条件样式 */
.expanded-filters {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

/* 高级搜索样式 */
.advanced-search-row {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
}

.advanced-search-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  flex: 1;
  margin-left: 20px;
}

.advanced-search-input {
  width: 100%;
}

/* 企业列表 */
.enterprise-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.enterprise-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
}

.enterprise-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
  margin-bottom: 16px;
}

.company-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.company-icon {
  width: 40px;
  height: 40px;
  background: #409eff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-text {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.company-details {
  flex: 1;
}

.company-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.company-meta {
  font-size: 12px;
  color: #666;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.company-location {
  font-size: 12px;
  color: #999;
  margin: 0;
  line-height: 1.4;
}

.card-content {
  margin-bottom: 20px;
  flex: 1;
}

.business-scope {
  margin-bottom: 12px;
}

.scope-title {
  font-size: 13px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.company-description {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.description-text {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.achievement-text {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 信息网格样式 */
.demand-info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  align-items: flex-start;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.info-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  min-width: 60px;
  flex-shrink: 0;
}

.info-value {
  font-size: 12px;
  color: #333;
  font-weight: 400;
  max-width: 200px;
  line-height: 1.4;
}

/* HTML标签样式 */
.info-value :deep(p) {
  margin: 0;
  line-height: 1.4;
}

.info-value :deep(ul), .info-value :deep(ol) {
  margin: 0;
  padding-left: 16px;
  line-height: 1.4;
}

.info-value :deep(li) {
  margin: 2px 0;
  line-height: 1.4;
}

.info-value :deep(b), .info-value :deep(strong) {
  font-weight: 600;
  color: #409eff;
}

.info-value :deep(i), .info-value :deep(em) {
  font-style: italic;
  color: #666;
}

.info-value :deep(u) {
  text-decoration: underline;
  color: #67c23a;
}

.info-value :deep(span[title]) {
  cursor: help;
  border-bottom: 1px dotted #999;
}

.info-value :deep(code) {
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.info-value :deep(blockquote) {
  border-left: 3px solid #409eff;
  margin: 4px 0;
  padding-left: 8px;
  color: #666;
  font-style: italic;
}

.button-group {
  display: flex;
  gap: 8px;
  width: 100%;
}

.detail-btn {
  flex: 1;
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}

.contact-btn {
  width: 100%;
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}

/* 加载状态 */
.loading-container {
  text-align: center;
  padding: 60px 0;
  color: #666;
}

.loading-container p {
  margin-top: 16px;
  font-size: 14px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #666;
}

.error-info {
  margin-bottom: 20px;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding: 20px 0;
}

/* 需求详情弹窗 */
.demand-detail {
  padding: 30px;
  background-color: #ffffff;
}



/* 需求头部 - 职位标题 */
.demand-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.demand-title {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin: 0;
  letter-spacing: 2px;
}

/* 基本信息区域 */
.basic-info-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 15px 0;
}

.basic-info-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.basic-info-line:last-child {
  margin-bottom: 0;
}

.basic-info-line span {
  position: relative;
}

.basic-info-line span:not(:last-child)::after {
  content: "|";
  margin-left: 8px;
  color: #666;
  font-weight: normal;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}



/* 需求要求详情网格 */
.demand-requirements-section {
  margin-bottom: 25px;
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.requirement-label {
  font-weight: 600;
  color: #333;
  min-width: 100px;
  flex-shrink: 0;
  font-size: 14px;
}

.requirement-value {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* 详细描述部分 */
.demand-description-section {
  margin-bottom: 25px;
}

/* 简历各个部分 */
.resume-section {
  margin-bottom: 25px;
}

.subsection-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

.section-content {
  padding-left: 0;
  text-align: left;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* 文本内容样式 */
.text-content {
  line-height: 1.6;
  color: #666;
  font-size: 14px;
  padding: 10px 0;
  text-align: left;
}



/* 驳回信息 */
.rejection-section {
  margin-bottom: 25px;
}

.rejection-reason {
  color: #f56c6c;
  font-weight: 600;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

/* 更多国籍弹窗样式 */
.more-nationalities-container {
  max-height: 400px;
  overflow-y: auto;
}

.nationalities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 16px 0;
}

.nationality-option {
  padding: 8px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  background: #fff;
}

.nationality-option:hover {
  background: #e6f7ff;
  color: #409eff;
  border-color: #409eff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
    height: 60px;
  }
  
  .logo-title {
    font-size: 18px;
  }
  
  .user-section {
    gap: 12px;
  }
  
  .content-container {
    padding: 0 16px;
  }
  
  .search-bar {
    flex-direction: column;
  }
  
  .enterprise-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .enterprise-card {
    padding: 16px;
  }
  
  .company-icon {
    width: 36px;
    height: 36px;
  }
  
  .icon-text {
    font-size: 14px;
  }
  
  .company-name {
    font-size: 15px;
  }
  
  .company-meta,
  .company-location {
    font-size: 11px;
  }
  
  .scope-title {
    font-size: 12px;
  }
  
  .description-text,
  .achievement-text {
    font-size: 11px;
  }
  
  .contact-btn {
    height: 32px;
    font-size: 13px;
  }
  
  .filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .filter-category {
    min-width: auto;
    margin-right: 0;
    margin-bottom: 4px;
  }
  
  .filter-options {
    width: 100%;
  }
  
  .filter-options {
    gap: 6px;
  }
  
  .filter-option {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .expand-button {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .advanced-search-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .advanced-search-inputs {
    grid-template-columns: 1fr;
    margin-left: 0;
    width: 100%;
  }
  
  /* 详情弹窗响应式 */
  .demand-title {
    font-size: 24px;
  }
  
  .requirements-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .section-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .subsection-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .demand-detail {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 0 12px;
  }
  
  .logo-title {
    font-size: 16px;
  }
  
  .content-container {
    padding: 0 12px;
  }
  
  .enterprise-card {
    padding: 12px;
  }
  
  .demand-info-grid {
    gap: 6px;
  }
  
  .info-label {
    min-width: 50px;
    font-size: 11px;
  }
  
  .info-value {
    font-size: 11px;
    max-width: 150px;
  }
  
  .info-value :deep(p) {
    margin: 0;
    line-height: 1.3;
  }
  
  .info-value :deep(ul), .info-value :deep(ol) {
    padding-left: 12px;
    line-height: 1.3;
  }
  
  .info-value :deep(li) {
    margin: 1px 0;
    line-height: 1.3;
  }
  
  .company-icon {
    width: 32px;
    height: 32px;
  }
  
  .icon-text {
    font-size: 12px;
  }
  
  .company-name {
    font-size: 14px;
  }
  
  .company-meta,
  .company-location {
    font-size: 10px;
  }
  
  .scope-title {
    font-size: 11px;
  }
  
  .description-text,
  .achievement-text {
    font-size: 10px;
  }
  
  .contact-btn {
    height: 28px;
    font-size: 12px;
  }
  
  .detail-btn {
    height: 28px;
    font-size: 12px;
  }
  
  .advanced-search-inputs {
    gap: 8px;
  }
  
  /* 弹窗响应式 */
  .demand-detail {
    padding: 16px;
  }
  
  .demand-detail-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .detail-item {
    margin-bottom: 16px;
  }
  
  .detail-label {
    min-width: 100px;
    font-size: 13px;
  }
  
  .detail-value {
    font-size: 13px;
  }
  
  .list-item {
    font-size: 13px;
  }
}
</style> 